<template>
  <div class="weui-navbar">
    <a class="weui-navbar__item" v-for="(item, index) in items"
     :key="item.name" :class="{'weui-bar__item--on': activeIndex === index + 1}" @click="active(index)">
      {{item.name}}
    </a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // activeIndex: 0
    }
  },
  props: {
    items: {
      type: Array,
      default: function() {
        return []
      }
    },
    activeIndex: {
      type: Number,
      default: 1
    }
  },
  mounted() {
  },
  methods: {
    active(index) {
      if (index + 1 === this.activeIndex) {
        return
      }
      // this.activeIndex = index
      this.$emit('activeChanged', index)
    }
  },
  computed: {
  },
  components: {
  }
}

</script>

<style lang="less">
</style>